<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>热力图显示</title>
    <!--引入当前页面样式表-->
    <link href="./css/style.css" rel="stylesheet" type="text/css" />
    <!--引入MapBox_GL样式表-->
    <link href="./css/MapBox_GL.css" rel="stylesheet" type="text/css" />
    <!--引入MapBox_GL脚本库-->
    <script src="./js/MapGis_MapBox_product.js" type="text/javascript"></script>
    <script type="text/javascript">
        //使用严格模式
        "use strict";
        //定义地图
        var map;
        /**初始化地图显示
        */
        function init() {
            //实例化要加载的source来源对象
            var tdtVec = {
                //来源类型为栅格瓦片
                "type": "raster",
                'tiles': [
                    //来源请求地址
                    "http://t0.tianditu.gov.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}&tk=88735d6d9bbd5930f1b1c8b8df72e762" ,
                ],
                //栅格瓦片的分辨率
                'tileSize': 256
            };
            var tdtCva = {
                //来源类型为栅格瓦片
                "type": "raster",
                'tiles': [
                    //来源请求地址
                    "http://t0.tianditu.gov.cn/DataServer?T=cva_w&X={x}&Y={y}&L={z}&tk=88735d6d9bbd5930f1b1c8b8df72e762" ,],
                //栅格瓦片的分辨率
                'tileSize': 256
            };
            //实例化Map对象加载地图
            map = new mapboxgl.Map({
                //地图容器div的id
                container: 'mapbox_map', // container id
                //设置地图样式信息
                style: {
                    //设置版本号，一定要设置
                    "version": 8,
                    //添加来源
                    "sources": {
                        "tdtVec": tdtVec,
                        "tdtCva": tdtCva
                    },
                    //设置加载并显示来源的图层信息
                    "layers": [
                        {
                            //图层id，要保证唯一性
                            "id": "tdtVec",
                            //图层类型
                            "type": "raster",
                            //连接图层来源
                            "source": "tdtVec",
                            //图层最小缩放级数
                            "minzoom": 0,
                            //图层最大缩放级数
                            "maxzoom": 17
                        },
                        {
                            //图层id，要保证唯一性
                            "id": "tdtCva",
                            //图层类型
                            "type": "raster",
                            //连接图层来源
                            "source": "tdtCva",
                            //图层最小缩放级数
                            "minzoom": 0,
                            //图层最大缩放级数
                            "maxzoom": 17
                        }
                    ],
                },
                //地图中心点
                center: [-135, 50],
                //地图当前缩放级数
                zoom: 3
            });
            //添加导航控件，设置显示位置。位置包括：'top-left'，'top-right'，'bottom-left'，'bottom-right'
            map.addControl(new mapboxgl.NavigationControl(), 'top-left');

            /**地图加载完成事件
            *  @param {string}   type 事件类型（地图加载完成）
            *  @param {function} listener 事件触发后的响应函数
            */
            map.on('load', function () {
                //添加geojson数据（点），作为热力图的原始数据
                map.addSource('earthquakes', {
                    //指定类型为geojson
                    "type": "geojson",
                    //数据的路径
                    "data": "./data/earthquakes.geojson"
                });
                //添加热力图图层
                map.addLayer({
                    //此id可随意设置，但是要唯一
                    "id": "earthquakes-heat",
                    //指定类型为热力图
                    "type": "heatmap",
                    //指定数据来源，要和addSource中的id保持一致
                    "source": "earthquakes",
                    //最大显示等级
                    "maxzoom": 9,
                    //设置绘制效果
                    "paint": {
                        //通过mag属性的值来设置每一个点对热力图强度的贡献
                        //数值在0~6之间线性变化时,热力图的强度从0~1进行线性变化
                        "heatmap-weight": [
                            "interpolate",
                            ["linear"],
                            ["get", "mag"],
                            0, 0,
                            6, 1
                        ],
                        //根据地图的缩放级别来设置热力图的强度
                        //缩放级别在0~9之间进行线性变化的时候，热力图的强度从1~3进行线性变化
                        "heatmap-intensity": [
                            "interpolate",
                            ["linear"],
                            ["zoom"],
                            0, 1,
                            9, 3
                        ],
                        //根据密度来设置热力图颜色
                        //密度在0~1之间线性变换时，颜色也跟随变换
                        "heatmap-color": [
                            "interpolate",
                            ["linear"],
                            ["heatmap-density"],
                            0, "rgba(33,102,172,0)",
                            0.2, "rgb(103,169,207)",
                            0.4, "rgb(209,229,240)",
                            0.6, "rgb(253,219,199)",
                            0.8, "rgb(239,138,98)",
                            1, "rgb(245,76,36)"
                        ],
                        //根据地图的缩放级别来设置热力图的半径
                        //缩放级别在0~9之间进行线性变化的时候，热力图的半径从2~20进行线性变化
                        "heatmap-radius": [
                            "interpolate",
                            ["linear"],
                            ["zoom"],
                            0, 2,
                            9, 20
                        ],
                        //设置热力图的透明度，在zoom处于7~9间将热力图逐渐的透明，在zoom大于9的时候完全透明
                        "heatmap-opacity": [
                            "interpolate",
                            ["linear"],
                            ["zoom"],
                            7, 1,
                            9, 0
                        ]
                    }
                });

            });
        }  
    </script>
</head>

<body onload="init()"
    style="margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
    <div id="mapbox_map" style="width: 100%; height: 100%;">
    </div>
</body>

</html>